@import "@styles/color.less";
@import "@styles/hairline.less";

.container {
    padding: 4vw 4vw 0 4vw;
    overflow-y: auto;
    height: 100vh;

    .close {
        display: flex;
        justify-content: flex-end;
        padding: 1.33vw 0 4vw 0;

        svg {
            width: 4vw;
            height: 4vw;
            fill: #9ea1ae;
        }
    }

    .title {
        display: flex;
        align-items: center;
        padding-bottom: 5.33vw;

        h3 {
            font-size: 4.53vw;
            color: #333;
            padding-right: 2.67vw;
        }

        h4 {
            font-size: 3.47vw;
            color: #a5a6ab;
            flex: 1;
        }

        button {
            font-size: 3.47vw;
            color: @mainColor;
            padding: 0.5vw 3vw;
            .hairline("all", @mainColor, 3vw);

            &.active {
                background: @mainColor;
                color: #fff;
            }
        }
    }

    .list {
        display: flex;
        flex-wrap: wrap;

        span {
            padding: 2vw 5.33vw;
            font-size: 3.73vw;
            color: #3a3948;
            background: #f7f8fa;
            white-space: nowrap;
            margin-bottom: 3.2vw;
            margin-right: 3.2vw;
            border-radius: 3vw;
            font-weight: 400;
            position: relative;

            &.active {
                color: @mainColor;
                font-weight: 500;
            }

            svg {
                width: 4vw;
                height: 4vw;
                position: absolute;
                right: -1vw;
                top: -1vw;
                fill: #c8c9cc;
            }
        }
    }

    .space {
        height: 5.33vw;
    }
}